<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>引导页</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<script src="../js/resize.js"></script>
		<link rel="stylesheet" href="../css/mui.min.css">

		<script type="text/javascript" src="../js/iconfont.js"></script>

		<style>
			#close {
				position: absolute;
				width: 30px;
				height: 30px;
				right: 2%;
				padding: 0px !important;
				top: 1%;
				text-align: center !important;
				color: #a7a7a7;
				border-radius: 50%;
				border-color: #a7a7a7;
			}
			
			.item-logo {
				width: 100%;
				height: 100%;
				position: relative;
			}
			
			.item-logo a {
				width: 200px;
				height: 200px;
				display: block;
				border: 1px solid #FFFFFF;
				border-color: rgba(255, 255, 255, 0.5);
				text-align: center;
				line-height: 200px;
				border-radius: 50%;
				font-size: 40px;
				color: #fff;
				position: absolute;
				top: 15%;
				left: 50%;
				margin-left: -100px;
			}
			
			.animate {
				position: absolute;
				left: 1rem;
				top: 4.2rem;
				width: 4.5rem;
				height: 7.8rem;
				color: #fff;
				display: -moz-box;
			}
			
			#tips-2.animate {
				position: absolute;
				left: .7rem;
				top: 3.6rem;
				color: #fff;
				display: -moz-box;
			}
			
			#tips-3.animate {
				position: absolute;
				left: .7rem;
				top: 3.2rem;
				color: #fff;
				display: -moz-box;
			}
			
			.animate h2 {
				text-align: center;
				margin-bottom: 20px;
			}
			
			.animate li {
				width: 50%;
				height: 30px;
				line-height: 30px;
				list-style: none;
				font-size: 16px;
				text-align: right;
			}
			
			.animate li:nth-child(3) {
				text-align: left;
				float: right;
			}
			
			.animated {
				-webkit-animation-duration: 1s;
				-webkit-animation-play-state: paused;
				-webkit-animation-fill-mode: both;
			}
			
			.guide-show .bounceInDown {
				-webkit-animation-name: bounceInDown;
				-webkit-animation-play-state: running;
				-webkit-animation-delay: 1s;
				display: block;
			}
			
			.guide-show .bounceInLeft {
				-webkit-animation-name: bounceInLeft;
				display: block;
				-webkit-animation-play-state: running;
			}
			
			.guide-show .bounceInRight {
				-webkit-animation-name: bounceInRight;
				display: block;
				-webkit-animation-play-state: running;
				-webkit-animation-delay: 0.5s;
			}
			
			@-webkit-keyframes bounceInDown {
				0%,
				60%,
				75%,
				90%,
				100% {
					-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
					animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				}
				0% {
					opacity: 0;
					-webkit-transform: translate3d(0, -3000px, 0);
					transform: translate3d(0, -3000px, 0);
				}
				60% {
					opacity: 1;
					-webkit-transform: translate3d(0, 60px, 0);
					transform: translate3d(0, 60px, 0);
				}
				75% {
					-webkit-transform: translate3d(0, -5px, 0);
					transform: translate3d(0, -5px, 0);
				}
				90% {
					-webkit-transform: translate3d(0, 3px, 0);
					transform: translate3d(0, 3px, 0);
				}
				100% {
					-webkit-transform: none;
					transform: none;
				}
			}
			
			@-webkit-keyframes bounceInLeft {
				0%,
				60%,
				75%,
				90%,
				100% {
					-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
					animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				}
				0% {
					opacity: 0;
					-webkit-transform: translate3d(-3000px, 0, 0);
					transform: translate3d(-3000px, 0, 0);
				}
				60% {
					opacity: 1;
					-webkit-transform: translate3d(25px, 0, 0);
					transform: translate3d(25px, 0, 0);
				}
				75% {
					-webkit-transform: translate3d(-10px, 0, 0);
					transform: translate3d(-10px, 0, 0);
				}
				90% {
					-webkit-transform: translate3d(5px, 0, 0);
					transform: translate3d(5px, 0, 0);
				}
				100% {
					-webkit-transform: none;
					transform: none;
				}
			}
			
			@-webkit-keyframes bounceInRight {
				0%,
				60%,
				75%,
				90%,
				100% {
					-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
					animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				}
				0% {
					opacity: 0;
					-webkit-transform: translate3d(3000px, 0, 0);
					transform: translate3d(3000px, 0, 0);
				}
				60% {
					opacity: 1;
					-webkit-transform: translate3d(-25px, 0, 0);
					transform: translate3d(-25px, 0, 0);
				}
				75% {
					-webkit-transform: translate3d(10px, 0, 0);
					transform: translate3d(10px, 0, 0);
				}
				90% {
					-webkit-transform: translate3d(-5px, 0, 0);
					transform: translate3d(-5px, 0, 0);
				}
				100% {
					-webkit-transform: none;
					transform: none;
				}
			}
			
			.guide-show li {
				/*background:url(../images/quanq.png) no-repeat center;
				-webkit-transform:rotateZ(120deg);
				
				background-size: cover;*/
				width: 1.5rem;
				height: 1.5rem;
				color: #000000;
				font-size: 1em;
				text-align: center;
			}
			
			.guide-show li h5 {
				padding-top: 20px;
				line-height: 18px;
				font-size: 16px;
				color: #000000;
				font-weight: bold;
			}
			
			.guide-show li p {
				line-height: 18px;
				font-size: 13px;
				color: #000000;
			}
		</style>
	</head>

	<body>
		<div id="slider" class="mui-slider mui-fullscreen" style="background-color: black;">
			<div class="mui-slider-group">

				<!-- 第一张 -->
				<div class="mui-slider-item">
					<div class="item-logo" style="background: url(../images/guide1.jpg) no-repeat center; background-size:contain">

						<!--<a href="#">
						
						</a>-->
						<button id='close' class="mui-btn mui-btn-warning mui-btn-outlined">跳</button>
						<div class="animate guide-show">
							<li class="animated bounceInDown">
								<img src="../images/gui1.png">
							</li>
							<li class="animated bounceInLeft" style=" position: relative; top: 1.9rem;">
								<img src="../images/gui3.png">
							</li>
							<li class="animated bounceInRight" style=" position: relative; top: -.5rem;">
								<img src="../images/gui2.png"></li>
						</div>
					</div>
				</div>

				<!-- 第二张 -->
				<div class="mui-slider-item">
					<div class="item-logo" style="background: url(../images/guide3.jpg) no-repeat center; background-size: contain;">
						<!--<a href="#">
						MUI
						</a>-->
						<button id='close' class="mui-btn mui-btn-warning mui-btn-outlined">跳</button>
						<div id="tips-2" class="animate mui-hidden">
							<li class="animated bounceInLeft">
								<img src="../images/gui4.png">
								<img src="../images/gui5.png" style=" position: relative; left: 3.6rem; bottom: 1.7rem; ">
							</li>

						</div>
					</div>
				</div>
				<!-- 第三张 -->
				<div class="mui-slider-item" id="threey">
					<div class="animate">

					</div>
					<div class="item-logo" style="background: url(../images/guide2.jpg) no-repeat center; background-size: contain;">
						<button id='close' class="mui-btn mui-btn-warning mui-btn-outlined">跳</button>
						<div id="tips-3" class="animate mui-hidden">
							<li class="animated bounceInRight" style=" position: relative; left: 3.4rem; top: 1.5rem;">
								<img src="../images/gui6.png">
							</li>
							<li class="animated bounceInDown" style=" position: relative;top: 2.5rem;">
								<img src="../images/gui7.png">
							</li>
						</div>
					</div>
				</div>
				<!-- 第四张 -->

			</div>
			<div class="mui-slider-indicator">
				<div class="mui-indicator mui-active"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>

			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script>
			mui.init();
			mui.back = function() {};
			mui.plusReady(function() {
				if(mui.os.ios) {
					plus.navigator.setFullscreen(true);
				}
				plus.navigator.closeSplashscreen();
			});
			//立即体验按钮点击事件
			document.getElementById("close").addEventListener('tap', function(event) {
				plus.storage.setItem("lauchFlag", "true");
				plus.navigator.closeSplashscreen();
				plus.navigator.setFullscreen(false);
				plus.webview.currentWebview().close();
				plus.webview.getLaunchWebview().evalJS('changeView(0)');
			}, false);

			mui.each(mui('.mui-btn'), function(index, item) {
				item.addEventListener('tap', function(e) {
					plus.storage.setItem("lauchFlag", "true");
					/*plus.navigator.setFullscreen(false);*/
					plus.webview.currentWebview().close();
				});
			});

			document.getElementById("threey").addEventListener("swipeleft", function() {
				console.log("你正在向左滑动");
				try {
					plus.storage.setItem("lauchFlag", "true");

					plus.webview.currentWebview().close();
				} catch(e) {
					console.log(e);
				}
			});

			//图片切换时，触发动画
			document.querySelector('.mui-slider').addEventListener('slide', function(event) {
				//注意slideNumber是从0开始的；
				var index = event.detail.slideNumber + 1;
				if(index == 2 || index == 3) {
					var item = document.getElementById("tips-" + index);
					if(item.classList.contains("mui-hidden")) {
						item.classList.remove("mui-hidden");
						item.classList.add("guide-show");
					}
				}
			});
		</script>
	</body>

</html>